<template>
  <div class="box">
    <div class="left">
      <div class="Ltitle">
        <span>题库分类</span>
        <!-- <img src="@/assets/images/questionBank/扩展2.png" alt="" />
        <img src="@/assets/images/questionBank/delete.png" alt="" />
        <img src="@/assets/images/questionBank/xiznzeng.png" alt="" /> -->
      </div>
      <div class="Lline"></div>
      <div class="Ltree">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :expand-on-click-node="false"
          :default-expand-all="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="data.reserve1 == 0" style="margin-right: 15px">{{
              node.label
            }}</span>
            <!-- <span v-if="data.reserve1 == 1"
              ><el-input size="mini" v-model="data.name"></el-input
            ></span> -->
            <!-- <span class="label" v-if="data.reserve1 == 0">
              <el-button
                type="text"
                size="mini"
                @click.stop="() => append(node, data)"
                icon="el-icon-circle-plus-outline"
              >
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click.stop="() => edit(data)"
                icon="el-icon-edit"
              >
              </el-button>
              <el-button
                type="text"
                size="mini"
                v-if="data.children.length == 0"
                @click.stop="() => remove(node, data)"
                icon="el-icon-delete"
              >
              </el-button>
            </span> -->
            <span v-if="data.reserve1 == 1">
              <el-button type="text" size="mini" @click.stop="isAdd(node, data)"
                >确定</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click.stop="isDelete(node, data)"
                >取消</el-button
              >
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right">
      <div class="RTop" style="padding: 10px 0">
        <el-button type="primary" @click="addQuestions">添加试题</el-button>
        <el-button type="primary" @click="batchAddQuestions"
          >批量导入</el-button
        >
      </div>
      <div class="RForm">
        <el-form ref="form" :inline="true" :model="queryParams">
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="标题" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="tableRow"
        :row-key="(row) => row.itemBankId"
        @expand-change="tableListExpand"
        :data="tableData"
        style="width: 100%"
        class="tableColumn"
      >
        <el-table-column type="expand" width="50">
          <template slot-scope="props">
            <div class="expandBox">
              <div class="expandLeft">
                <div class="left">
                  <div class="wz">选项</div>
                </div>
                <div class="right">
                  <!-- <div class="RTop" v-html="props.row.testItemContent"></div> -->
                  <div class="rBottom">
                    <div class="rItem" v-for="item in props.row.answerList">
                      <span>{{ item.identifier }}、</span>
                      <span v-html="item.answerContent"></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="expandRight">
                <div style="display: flex;margin-top: 10px;justify-content: flex-end;margin-right: 10px;">
                  <el-button type="primary" @click="deleteTable(props.row)"
                    >删除</el-button
                  >
                  <el-button
                    type="primary"
                    style="margin-left: 15px"
                    @click="editTable(props.row)"
                    >编辑</el-button
                  >
                </div>
                <div class="eItem">
                  <div class="eLItem">答案</div>
                  <div class="eRItem">{{ props.row.answerJ.join(",") }}</div>
                </div>
                <div class="eItem">
                  <div class="eLItem">解析</div>
                  <div class="eRItem" v-html="props.row.analysis"></div>
                </div>
                <div class="eItem">
                  <div class="eLItem">难度</div>
                  <div class="eRItem">{{ props.row.difficulty }}</div>
                </div>
                <!-- <div style="display: flex;position: absolute;bottom: 40px;right: 30px;"> -->
                
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="试题内容"
          min-width="480"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div>
              <div class="info" v-html="scope.row.testItemContent"></div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="questionTypes" label="题型" min-width="180">
        </el-table-column>
        <el-table-column prop="classification" label="分类" min-width="150px">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
        <el-table-column prop="createBy" label="创建人"> </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="150px"
        ></el-table-column>
        <el-table-column prop="updateBy" label="修改人"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="150px">
        </el-table-column>
        <el-table-column prop="label" label="所属分类"> </el-table-column>
        <el-table-column prop="address" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <div style="display: flex">
              <el-button type="primary" @click="deleteTable(scope.row)"
                >删除</el-button
              >
              <el-button
                type="primary"
                style="margin-left: 15px"
                @click="editTable(scope.row)"
                >编辑</el-button
              >
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTableData"
        />
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div style="display: flex; align-items: center; justify-content: center;min-width: 300px;">
        <el-upload
          class="upload-demo"
          drag
          :on-success="upSuccess"
          :headers="{ Authorization: 'Bearer ' + getToken() }"
          action="http://192.168.3.16:8080/system/bank/importData"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div> -->
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="formDialog" width="30%">

    </el-dialog>


  </div>
</template>
<script>
import {
  listClassification,
  getClassification,
  delClassification,
  addClassification,
  updateClassification,
  listBank,
  listAnswer,
  delBank,
} from "@/api/questionBank/management";
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      treeData: [],

      defaultProps: {
        children: "children",
        label: "name",
      },
      classForm: {},
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        entityClassificationId: null,
      },
      total: 0,
      clickHandler: null, // 存储事件处理函数的引用
      mdata: null,
      oldBankId: "",
      dialogVisible: false,
      formDialog:false
    };
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },

  mounted() {
    this.getTreeList();
    this.getTableData();

    setTimeout(() => {
      //判断是否初始配置，若无则配置。
      if (!this.mathJax.isMathjaxConfig.bool) {
        this.mathJax.initMathjaxConfig();
      }
      this.$nextTick((_) => {
        //传入组件id，让组件被MathJax渲染
        this.mathJax.MathQueue("questionList-page");
      });
    }, 300);
  },
  methods: {
    getToken() {
      return getToken();
    },

    getTreeList() {
      listClassification().then((res) => {
        this.treeData = res.data;
        this.init(this.treeData);
      });
    },
    //点击树状图
    handleNodeClick(val) {
      console.log(val);
      this.queryParams["entityClassificationId"] = val.id;

      this.getTableData();
    },
    append(node, data) {
      console.log(node, data);
      const newChild = { id: 1, name: "testtest", children: [], reserve1: 1 };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      node.expanded = true;
    },

    edit(data) {
      data.reserve1 = 1;
      this.mdata = JSON.parse(JSON.stringify(data));
      this.clickHandler = () => this.bodyEdit(data);
      document.body.addEventListener("click", this.clickHandler);
    },
    bodyEdit(data) {
      data.name = this.mdata.name;
      data.reserve1 = 0;
      if (this.clickHandler) {
        document.body.removeEventListener("click", this.clickHandler);
        this.clickHandler = null;
      }
    },

    remove(node, data) {
      delClassification(data.id).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getTreeList();
        }
      });
    },
    isAdd(node, val) {
      for (let i = 0; i < node.parent.childNodes.length; i++) {
        if (node.parent.childNodes[i].data.id == val.id) break;
        if (node.parent.childNodes[i].data.name == val.name) {
          this.$message.warning("同层级不能有重名分类");
          return;
        }
      }
      if (val.type != null) {
        let obj = {
          entityClassificationId: val.id,
          entityClassificationName: val.name,
        };
        updateClassification(obj).then((res) => {
          if (res.code == 200) {
            val.reserve1 = 0;
            this.$message.success("修改成功");
            this.getTreeList();
          }
        });
      } else {
        // console.log(node.parent.data);
        let obj = {
          parentId: node.parent.data.id,
          entityClassificationName: val.name,
          reserve2: Number(node.parent.data.type) + 1,
        };
        console.log(obj);
        addClassification(obj).then((res) => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            val.reserve1 = 0;
            this.getTreeList();
          }
        });
      }
    },
    isDelete(node, data) {
      if (data.type != null) {
        data.reserve1 = 0;
      } else {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex((d) => d.id === data.id);
        children.splice(index, 1);
      }
    },
    init(data) {
      if (data.length === 0) return;
      for (let i = 0; i < data.length; i++) {
        if (typeof data[i] === "object" && data[i] !== null) {
          this.$set(data[i], "reserve1", 0);
        }
        if (Array.isArray(data[i].children) && data[i].children.length > 0) {
          this.init(data[i].children);
        }
      }
    },
    getTableData() {
      listBank(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    addQuestions() {
      this.$router.push("/questionBank/questionBank/management/addQuestions");
    },
    //试题详情
    tableListExpand(row, expandedRows) {
      console.log(row, expandedRows);
      if (this.oldBankId != "" && this.oldBankId != row) {
        this.$refs.tableRow.toggleRowExpansion(this.oldBankId, false);
      }
      this.oldBankId = row;
      //判断是否初始配置，若无则配置。
      if (!this.mathJax.isMathjaxConfig.bool) {
        this.mathJax.initMathjaxConfig();
      }
      this.$nextTick((_) => {
        //传入组件id，让组件被MathJax渲染
        this.mathJax.MathQueue("questionList-page");
      });
      if (row.answerList && row.answerList.length != 0) return;
      let obj = {
        itemBankId: row.itemBankId,
      };
      listAnswer(obj).then((res) => {
        if (res.code == 200) {
          row.answerList = res.rows;
          //判断是否初始配置，若无则配置。
          if (!this.mathJax.isMathjaxConfig.bool) {
            this.mathJax.initMathjaxConfig();
          }
          this.$nextTick((_) => {
            //传入组件id，让组件被MathJax渲染
            this.mathJax.MathQueue("questionList-page");
          });
        }
      });
    },
    //删除题库
    deleteTable(val) {
      this.$alert("确认要删除吗？", "请确认", {
        confirmButtonText: "确定",
        closeOnClickModal: true,
        callback: (action) => {
          if (action == "confirm") {
            delBank(val.itemBankId).then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getTableData();
              }
            });
          }
          console.log(action, "slefhioshfusefhiu");
        },
      });
    },
    //修改题目
    editTable(val) {
      this.$router.push(
        "/questionBank/questionBank/management/addQuestions?itemBankId=" +
          val.itemBankId
      );
    },
    //批量上传
    batchAddQuestions() {
      this.dialogVisible = true;
    },
    //上传成功
    upSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.code == 200) {
        let res = response.msg.split("！");
        console.log(res);

        this.$notify({
          title: res[0],
          dangerouslyUseHTMLString: true,
          message: res[1],
          // message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  background-color: #f1f3f8;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  .left {
    height: 100%;
    width: 265px;
    background-color: white;
    overflow: auto;
    .Ltitle {
      font-size: 16px;
      padding: 0 15px;
      line-height: 50px;
      display: flex;
      align-items: center;

      span {
        margin-right: 15px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 15px;
      }
      img:nth-of-type(1) {
        transform: rotateZ(90deg);
      }
      img:nth-of-type(2),
      img:nth-of-type(3) {
        opacity: 0.5;
      }
    }
    .Lline {
      height: 1px;
      background-color: #f1f3f8;
    }
    .Ltree {
      padding: 15px 0;
      height: calc(100% - 51px);
      overflow: auto;
      // width: 500px;

      .el-input {
        width: 50%;
        margin-right: 8px;
      }
      ::v-deep .el-tree-node {
        padding: 5px 0;
      }
    }
  }
  .right {
    height: 100%;
    width: calc(100% - 280px);
    overflow: auto;
    background-color: white;
    margin-left: 15px;
    padding: 0 15px;
    box-sizing: border-box;
    .RTop {
      height: auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      > ::v-deep p {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .RForm {
      .el-form-item {
        width: 20%;
        min-width: 180px;
        ::v-deep .el-form-item__content {
          width: 100%;
        }
      }
    }
    .rBottom {
      .rItem {
        display: flex;
        margin-bottom: 10px;
        > span:nth-last-child(1) {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  ::v-deep p {
    display: flex;
    align-items: center;
  }
}

.label {
  span {
    margin-right: 15px;
  }
}
.el-icon-edit {
  color: #f1f3f8;
}

.el-tree-node {
  .custom-tree-node {
    line-height: 30px;
  }
  > .el-tree-node__content:hover {
    .label {
      display: inline-block;
    }
  }
  .label {
    display: none;
  }
}

.is-current {
  > .el-tree-node__content:nth-of-type(1) {
    .label {
      display: inline-block;
    }
  }
}
.expandBox {
  height: 500px;
  background-color: #f1f3f8;
  padding: 20px;
  display: flex;
  .expandLeft {
    flex: 1;
    background-color: white;
    display: flex;
  }
  .expandRight {
    padding-left: 15px;
    flex: 1;
    background-color: white;
    margin-left: 20px;
    .eItem {
      display: flex;
      .eLItem {
        color: rgba(0, 0, 0, 0.3);
        font-size: 16px;
        line-height: 40px;
        text-align: right;
        font-weight: bold;
      }
      .eRItem {
        line-height: 40px;
        padding-left: 10px;
        font-size: 16px;
      }
    }
  }
  .left {
    max-width: 200px;
    // background-color: beige;
    flex: 1;
    .wz {
      color: rgba(0, 0, 0, 0.3);
      font-size: 16px;
      line-height: 40px;
      text-align: right;
      font-weight: bold;
    }
  }
  .right {
    // background-color: rgb(221, 221, 113);
    flex: 1;
    padding: 10px 0;
    font-size: 16px;
    .rBottom {
      margin-top: 10px;
      span {
        line-height: 40px;
      }
      span:first-child {
        // margin-right: 10px;
      }
    }
  }
}

.tableColumn {
  .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

.el-tree {
  .el-tree-node__content {
    display: block !important;
  }
  .el-tree-node__children {
    overflow: visible !important;
  }
}
::v-deep .el-tree-node > .el-tree-node__children {
  overflow: visible;
}
::v-deep .el-tree--highlight-current .el-tree-node {
  min-width: max-content;
}
</style>
